<template>
  <div class="my">
    <div class="header">
      <div class="avatar"></div>
      <div class="nickname">{{username}}</div>
    </div>
    <p @click="collect()" class="title">我的收藏</p>
    <div @click="exit()" class="exit">{{signinfo}}</div>

    <foot></foot>
  </div>
</template>
<script>
import foot from '../components/foot'
export default {
  components:{
    foot
  },
  data() {
    return {
      signStatus:'',
      signinfo:'',
      username:''
    }
  },
  methods:{
    //进入收藏页面
    collect(){
      var token = localStorage.getItem('token');
      this.$axios({
        method:'post',
        url:'/login/status',
        data:{
          token:token
        }
      }).then(res=>{
      }).catch(err=>{
        console.log(err)
      })
      this.$router.push({name:'collect'})
    },
    exit(){
      localStorage.removeItem('token')
      this.$router.push({name:'login'})
    },
 
  },
  
  created() {
    var token = localStorage.getItem('token')
    if(token){
      this.signStatus = true
      this.signinfo = '退出'
    }else{
      this.signStatus = false
      this.signinfo = '登陆'
    }
  },
 
}
</script>

<style scoped>
  .header{
    width: 100%;
    height: 175px;
    background-color: #dd3635;
    line-height: 175px;
    text-align: center;
    font-size: 30px;
    color: white;
  }
  .mycollections{
    margin-top: 20px;
    width: 100%;
  }
  .title{
    padding-left: 20px;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 40px;
    color: #ffffff;
    background: gainsboro;
  }

  .exit{
    font-size: 16px;
    border-radius: 8px;
    width: 60%;
    margin: 10px auto;
    background: #dd3635;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #fff
  }
</style>